<template>
	<view class="ljapp">
		<view v-if="loading">
		</view>
		<view v-else>
			<view style="padding-bottom: 38rpx;">
				<view class="card">
					<view class="title">基本信息</view>

					<u--form labelWidth="auto" :labelStyle="{fontSize:'28rpx',color:'#333'}">
						<u-form-item label="姓名" required borderBottom>
							<u--input
								v-model="obj.name"
								border="none"
								inputAlign="right"
								fontSize="24rpx"
								placeholderStyle="color: #c2c2c2"
								placeholder="输入您真实姓名"
							></u--input>
						</u-form-item>
						<u-form-item label="性别" required borderBottom>
							<view class="u-flex" style="width: 100%;">
								<view class="u-flex-10"></view>
								<u-radio-group
									size="33rpx"
									activeColor="#12b3f1"
									v-model="obj.sex"
								>
									<u-radio label="男" name="1" labelSize="24rpx"></u-radio>
									<u-radio label="女" name="2" labelSize="24rpx"></u-radio>
								</u-radio-group>
							</view>
						</u-form-item>
						<u-form-item label="出生日期" required borderBottom>
							<view style="width: 100%;">
								<picker mode="date" :value="obj.birthday" @change="changeDate">
									<view style="font-size:24rpx;text-align:right;" v-if="obj.birthday">{{obj.birthday}}</view>
									<view style="font-size:24rpx;text-align:right;color:#c2c2c2;" v-else>选择出生日期</view>
								</picker>
							</view>
						</u-form-item>
						<u-form-item label="联系方式" required borderBottom>
							<u--input
								v-model="obj.mobile"
								border="none"
								inputAlign="right"
								fontSize="24rpx"
								placeholderStyle="color: #c2c2c2"
								placeholder="输入您手机号"
							></u--input>
						</u-form-item>
						<u-form-item label="证件号" required borderBottom>
							<u--input
								v-model="obj.id_card"
								border="none"
								inputAlign="right"
								fontSize="24rpx"
								placeholderStyle="color: #c2c2c2"
								placeholder="输入身份证号、港澳通行证、护照"
							></u--input>
						</u-form-item>
					</u--form>

					<u-datetime-picker ref="datetimePicker" mode="date" :minDate="0" :show="showDate" v-model="birthday" @cancel="showDate=false" @confirm="changeDate"></u-datetime-picker>
				</view>

				<view class="btn-fillet" @click="submit">确定</view>
			</view>
		</view>
	</view>

</template>

<script>
	import Comcity from '@/components/Comcity.vue'
	export default {
		components: {
			Comcity
		},
		data() {
			return {
				loading: false,
				reason: '',
				time: '',

				//提交需求
				obj: {
					name: '',
					sex: '1',
					birthday: '',
					mobile: '',
					id_card: '',
				},
				showDate: false,
				birthday: '1991-10-10',
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			changeDate(e){
				this.obj.birthday = e.detail.value
				// this.obj.birthday = this.$u.timeFormat(e.value,'yyyy-mm-dd')
				// this.showDate = false
			},

			//详情
			init() {
				this.$Http({
					url: 'getSetting',
					load: false,
					data: {},
				}).then(res => {
					this.loading = false
					if (res.code == 1 && res.data) {
						this.obj.name = res.data.name
						this.obj.sex = res.data.sex.toString()
						if(res.data.birthday!=null){
							console.log('birthday', 'y')
							this.obj.birthday = res.data.birthday
						}else{
							console.log('birthday', 'n')
						}
						this.obj.mobile = res.data.mobile
						this.obj.id_card = res.data.id_card
					}
				});
				// uni.pageScrollTo({
				// 	scrollTop: 0,
				// 	duration: 100,
				// });
			},
			//提交
			submit() {
				this.$Http({
					url: 'saveSetting',
					data: this.obj,
					show: true,
					type: 'POST'
				}).then(res => {
					console.log('submit',res)
					if (res.code == 1) {
						this.$u.toast(res.msg)
						// this.init()
						setTimeout(function(){
							uni.navigateBack({})
						},1000)
					}
				});
			}
		}
	}
</script>

<style lang="less">
	@import '@/pagesB/style.less';

	.card{
		margin: 20rpx;
		padding-top: 26rpx;
		padding-left: 16rpx;
		padding-right: 15rpx;
		padding-bottom: 40rpx;

		.title{
			position: relative;
			padding-left: 34rpx;
			height: 42rpx;
			line-height: 42rpx;
			font-weight: 500;
			margin-left: 20rpx;
			margin-bottom: 10rpx;

			&:after{
				position: absolute;
				top: 0;
				left: 0;
				content: '';
				width: 6rpx;
				height: 42rpx;
				border-radius: 42rpx;
				background-color: #12b3f1;
				overflow: hidden;
			}
		}

		/deep/.u-form-item__body{padding: 24rpx 0 22rpx;}
		/deep/.u-form-item__body__left{padding-left: 52rpx!important;}
		/deep/.u-line{
			border-color: #f5f5f5!important;
			border-width: 2px!important;
		}
		/deep/.u-form-item__body__right__content{padding-right: 54rpx;}
		/deep/.u-form-item__body__left__content__required{font-weight: 700;left:-24rpx;color:#ff0707;}

		/deep/.u-radio{margin-left: 34rpx;}

		/deep/.u-textarea{
			padding: 10rpx 24rpx;
			padding-right: 18rpx;
		}

		/deep/.u-upload{padding-left: 28rpx;}
		/deep/.u-upload__button{margin: 0;border-radius: 10rpx;background-color: #f1f1f1;width: 192rpx!important;height: 174rpx!important;
			.u-icon__icon{
				font-size: 70rpx!important;
			}
		}
		/deep/.u-upload__button__text{font-size: 22rpx; color: #999;}
	}

	.btn-fillet{
		margin: 64rpx auto 0;
	}
</style>
